<template>
  <div class="back">
  <div class="container" >
    <p style="font-size: 20px;color: white">最近一个月请假记录：</p>
    <table cellpadding="0" cellspacing="0" align="center">
      <thead>
        <tr>
          <th >序号</th>
          <th >日期</th>
          <th >起始时间</th>
          <th >终止时间</th>
          <th >请假原因</th>
          <th>备注</th>
          <th >状态</th>
          <th >操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in record" v-bind:key="index">
          <td>{{index+1}}</td>
          <td>{{item.date}}</td>
          <td>{{item.time_s}}</td>
          <td>{{item.time_e}}</td>
          <td>{{item.reason}}</td>
          <td>{{item.note}}</td>
          <td>{{item.state}}</td>
          <td v-if="item.state=='准假'">
            <button style="font-size: 15px" @click="item.state='已销假';alert('销假成功！')">销假</button>
          </td>
          <td v-else></td>
        </tr>
      </tbody>
    </table>
  </div>
  <br>
  <div class="container">
    <p style="font-size: 20px;color: white">请假单填写：</p>
    <p style="font-size: 18px;color: white">日期：2021
    <select v-model="date_mon">
      <option v-for="mon in 12" v-bind:key="mon">{{mon}}</option>
    </select>月
    <select v-model="date_day">
      <option v-for="day in 31" v-bind:key="day" >{{day}}</option>
    </select>日

    <br>
    起止时间：
    <select v-model="hour_s">
      <option  v-for="hour_s in 24" v-bind:key="hour_s">{{hour_s}}</option>
    </select>时
    <select v-model="min_s">
      <option  v-for="min_s in 60" v-bind:key="min_s">{{min_s}}</option>
    </select>分 至
    <select v-model="hour_e">
      <option v-for="hour_e in items.slice(hour_s-1,24)" v-bind:key="hour_e">{{hour_e}}</option>
    </select>时
    <select v-model="min_e">
      <option  v-for="min_e in 60" v-bind:key="min_e">{{min_e}}</option>
    </select>分
    <br>
    请假原因：
    <select v-model="reason">
      <option>事假</option>
      <option>病假</option>
      <option>其他（请在备注中说明）</option>
    </select>

    <br>
    备注：
    <textarea v-model="note"/>
    <br>
    <button @click="askLeave">提交</button>

    </p>
  </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items:[],
      object : JSON.parse(this.$route.query.obj),
      record:[
        {date:"2021-4-5",time_s:'8:00',time_e:'9:00',reason:'事假',note:'',state:'已销假'},
        {date:"2021-4-8",time_s:'1:30',time_e:'16:00',reason:'事假',note:'世界那么大，我想去看看',state:'驳回'},
        {date:"2021-4-9",time_s:'8:00',time_e:'10:00',reason:'病假',note:'',state:'已销假'},
        {date:"2021-4-15",time_s:'13:00',time_e:'15:00',reason:'事假',note:'世界那么大，我真的想去看看',state:'驳回'},
        {date:"2021-4-20",time_s:'10:00',time_e:'12:00',reason:'病假',note:'世界那么大，你真的不让我去看吗',state:'驳回'},
        {date:"2021-4-25",time_s:'8:00',time_e:'10:00',reason:'事假',note:'',state:'准假'}
      ],
      date_mon:'',
      date_day:'',
      hour_s:'',
      min_s:'',
      hour_e:'',
      min_e:'',
      reason:'',
      note:'',
    };

  },
  methods:{
    askLeave(){
      alert("请假成功！请等待审批结果！");
      console.log('99898989')
      let new_date = '2021-'+this.date_mon+'-'+this.date_day;
      let new_time_s = this.hour_s+':'+this.min_s;
      let new_time_e = this.hour_e+':'+this.min_e;
      this.record.push({
        date:new_date,
        time_s:new_time_s,
        time_e:new_time_e,
        reason:this.reason,
        note:this.note,
        state:'待审批'
      })

    }
  },
  mounted:function() {
    for(let i=0;i<=30;i++){
      this.items[i]=i+1;
    }
    //进入页面自动执行这个函数，所以这里应该是查询请假记录
  },


};
</script>


<style scoped>
.container{
  width: 60%;
  height: auto;
  background: white;
  margin-left: 20%;
  margin-top: 30px;
  /*opacity: 0.3;*/
  background: rgba(0, 0, 0, 0.3);
  overflow-y: scroll;
  max-height:40%;
}

.back{
  background:url("http://cdn-dlut.supwisdom.com/student/static/common-home/img/theme1.jpg");
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  z-index: -1;
  position: fixed;
  top: 0px; /*这里是设置与顶部的距离*/
  left: 0px; /*这里是设置与左边的距离*/
  bottom: 0px;
  right: 0px;

}
table thead th {
  background: #f5f5f5;
  padding: 10px;
  text-align: center;
}

table tbody td {
  background: lightgray;
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
}

table tbody td span {
  margin: 0 10px;
  cursor: pointer;
}
.write{
  font-size: 25px;
}
</style>
